<style scoped="scoped" lang="scss">
	.editor{height:100%; border:1px solid #eee; background:#fff; display:flex; flex-direction: column;
		.editor-tool{ height:35px; display:flex; border-bottom:1px solid #eee;
			li{ width:50px; cursor:pointer; position: relative;
				.s1{ height:35px; display:block; width:100%; border:0; cursor:pointer; background:none; display:flex; align-items:center; justify-content: center; color:#666; &.on{color:#000;font-weight:bold;} }
				/deep/ .el-color-picker__trigger{border:0; width:22px; height:22px; margin-top:6px;}
				.dropdown{ position: absolute; left:-70px; box-shadow:#ddd 0 0 10px; top:35px; width:190px; padding:0 0 5px 5px; display:flex; flex-wrap:wrap; z-index:1; background:#fff; border:1px solid #eee; 
					a{margin:3px 3px 0 0; transition:all 0.3s ease; color:#666; width:15px;height:15px; &:hover{ opacity:0.6;}}
				}
				.dropdown2{ position: absolute; left:-25px; box-shadow:#ddd 0 0 10px; top:35px; width:100px; z-index:1; background:#fff; border:1px solid #eee;
					a{ transition:all 0.3s ease; color:#666; display: block; padding:8px 0; text-align:center; border-bottom:1px solid #f1f1f1; text-decoration:none; &:hover{ color:#409EFF;}}
				}
			}
		}
		.editor-html{
			 flex:1; overflow:hidden auto; padding:12px; font-size:12px; color:#333;
		}
	}
</style>
<template>
	<div class="editor">
		<ul class="editor-tool">
			<li><button type="button" @click="setFontStyle('bold', 1)" class="s1 iconfont icon-B" :class="check1 ? 'on' : ''"></button></li>
			<li><button @click="setFontStyle('underline', 2)" class="s1 iconfont icon-xiahuaxian1" :class="check2 ? 'on' : ''"></button></li>
			<li><button type="button" @click="setFontStyle('italic', 3)" class="s1 iconfont icon-xieti" :class="check3 ? 'on' : ''"></button></li>
			<li>
				<button type="button" class="s1 iconfont icon-yanse" @click="show = show ? false : true"></button>
				<div class="dropdown" v-if="show"><a href="javascript:void(0);" @click="setFontColor(item)" v-for="(item, index) in colorList" :style="`background:${item}`"></a></div>
			</li>
			<li>
				<button type="button" class="s1 iconfont icon-H" @click="show2 = show2 ? false : true"></button>
				<div class="dropdown2" v-if="show2">
					<a href="javascript:void(0)" v-for="(item, index) in sizeList" @click="setFontSize(item.val)">{{ item.txt }}</a>
				</div>
			</li>
			<li>
				<button type="button" class="s1 iconfont icon-juzuoduiqi" @click="show3 = show3 ? false : true"></button>
				<div class="dropdown2" v-if="show3">
					<a href="javascript:void(0)" v-for="(item, index) in alignList" @click="setAlign(item.val)">{{ item.txt }}</a>
				</div>
			</li>
		</ul>
		<div class="editor-html" ref="editor" contenteditable="true" v-html="content" @input="change($event)"></div>
	</div>
</template>

<script>
export default {
	props: {
		content: { default: '' }
	},
	data() {
		return {
			alignList: [{ txt: '居左', val: 'justifyleft' }, { txt: '居中', val: 'justifycenter' }, { txt: '居右', val: 'justifyright' }], //对齐方式
			sizeList: [
				{ val: 1, txt: '10px' },
				{ val: 2, txt: '13px' },
				{ val: 3, txt: '16px' },
				{ val: 4, txt: '18px' },
				{ val: 5, txt: '24px' },
				{ val: 6, txt: '32px' },
				{ val: 7, txt: '48px' }
			], //文字大小
			colorList: [
				'rgb(0, 0, 0)',
				'rgb(255, 255, 255)',
				'rgb(238, 236, 225)',
				'rgb(191, 191, 191)',
				'rgb(78, 129, 187)',
				'rgb(226, 83, 77)',
				'rgb(154, 186, 96)',
				'rgb(129, 101, 160)',
				'rgb(71, 172, 197)',
				'rgb(249, 151, 76)',
				'rgb(0, 170, 240)',
				'rgb(60, 176, 53)',
				'rgb(200, 14, 35)',
				'rgb(249, 49, 71)',
				'rgb(16, 225, 163)',
				'rgb(210, 19, 239)',
				'rgb(242, 105, 105)',
				'rgb(242, 82, 82)',
				'rgb(242, 59, 59)',
				'rgb(12, 150, 113)',
				'rgb(221, 216, 195)',
				'rgb(182, 178, 159)',
				'rgb(143, 140, 123)',
				'rgb(105, 102, 87)',
				'rgb(66, 64, 51)',
				'rgb(198, 217, 240)',
				'rgb(161, 180, 204)',
				'rgb(124, 144, 168)',
				'rgb(87, 108, 132)',
				'rgb(50, 72, 96)',
				'rgb(218, 229, 240)',
				'rgb(181, 195, 210)',
				'rgb(144, 162, 181)',
				'rgb(108, 129, 152)',
				'rgb(71, 96, 123)',
				'rgb(242, 219, 219)',
				'rgb(213, 182, 182)',
				'rgb(184, 146, 145)',
				'rgb(156, 110, 108)',
				'rgb(127, 74, 71)',
				'rgb(234, 241, 222)',
				'rgb(202, 212, 186)',
				'rgb(171, 183, 150)',
				'rgb(139, 154, 115)',
				'rgb(108, 125, 79)',
				'rgb(230, 224, 236)',
				'rgb(196, 189, 204)',
				'rgb(163, 154, 173)',
				'rgb(129, 119, 142)',
				'rgb(96, 84, 111)',
				'rgb(217, 238, 243)',
				'rgb(179, 208, 215)',
				'rgb(142, 178, 187)',
				'rgb(104, 148, 159)',
				'rgb(67, 118, 131)',
				'rgb(254, 233, 218)',
				'rgb(233, 201, 177)',
				'rgb(213, 169, 136)',
				'rgb(193, 137, 96)',
				'rgb(173, 105, 55)'
			], //颜色值
			show: false, //显示颜色
			show2: false, //显示字体大小
			show3: false, //显示对齐
			check1: false, //选择粗体
			check2: false, //选中下划线
			check3: false //选中斜体
		};
	},

	mounted() {
				
	},

	methods: {
		//获取HTML
		change(res) {
			let content = res.target.innerHTML;
			this.$emit('getContent', content);
		},

		//设置颜色
		setFontColor(e) {
			document.execCommand('foreColor', false, e);
			this.show = false;
		},

		//设置字体加粗
		setFontStyle(obj, index) {
			if (index == 1) {
				this.check1 = this.check1 ? false : true;
			}
			if (index == 2) {
				this.check2 = this.check2 ? false : true;
			}
			if (index == 3) {
				this.check3 = this.check3 ? false : true;
			}
			document.execCommand(obj, false, null);
		},

		//设置字体大小
		setFontSize(val) {
			document.execCommand('fontSize', false, val);
			this.show2 = false;
		},

		//设置对齐方式
		setAlign(val) {
			document.execCommand(val, false, null);
			this.show3 = false;
		}
	}
};
</script>

<style></style>
